<template>
    <div class="labeltype-panel-wrapper">
        <div class="label-type-1">本地数据集</div>
        <div
            class="label-type-2"
            :class="selected_type === 'detection' ? 'selected' : ''"
            @click="setActiveLabelType('detection', 'local')"
        >
            <Picture class="label-icon" />
            图像检测/分割
        </div>
        <div
            class="label-type-2"
            :class="selected_type === 'keypoint' ? 'selected' : ''"
            @click="setActiveLabelType('keypoint', 'local')"
        >
            <Operation class="label-icon" />
            图像关键点检测
        </div>
        <div
            class="label-type-2"
            :class="selected_type === 'ocr' ? 'selected' : ''"
            @click="setActiveLabelType('ocr', 'local')"
        >
            <Document class="label-icon" />
            OCR数据集
        </div>
        <div class="label-type-1">云端数据集</div>
        <div
            class="label-type-2"
            :class="selected_type === 'detection-cloud' ? 'selected' : ''"
            @click="setActiveLabelType('detection', 'remote')"
        >
            <Picture class="label-icon" />
            图像检测/分割
        </div>
        <div
            class="label-type-2"
            :class="selected_type === 'keypoint-cloud' ? 'selected' : ''"
            @click="setActiveLabelType('keypoint', 'remote')"
        >
            <Operation class="label-icon" />
            图像关键点检测
        </div>
        <div
            class="label-type-2"
            :class="selected_type === 'ocr-cloud' ? 'selected' : ''"
            @click="setActiveLabelType('ocr', 'remote')"
        >
            <Document class="label-icon" />
            OCR数据集
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
const emit = defineEmits(["setDatasetType"]);
const selected_type = ref("detection");
onMounted(() => {});

function setActiveLabelType(dataset_type, data_src) {
    selected_type.value =
        data_src === "local" ? dataset_type : dataset_type + "-cloud";
    emit("setDatasetType", {
        data_src: data_src,
        dataset_type: dataset_type,
    });
}
</script>

<style scoped>
.labeltype-panel-wrapper {
    display: block;
    background-color: rgb(209, 213, 218);
    width: 100%;
    height: calc(100% - 0px);
}

.label-type-1 {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    padding: 10px 5px 10px 10px;
    color: rgb(237, 239, 241);
    background-color: rgb(69, 65, 65);
}

.label-type-2 {
    background-color: rgb(255, 255, 255);
    margin: 2px;
    padding: 10px 25px;
    line-height: 1.5;
    font-size: 12px;
    color: rgb(66, 66, 67);
    display: flex;
}

.label-type-2:hover {
    background-color: rgb(255, 255, 255);
    /* border-radius: 6px; */
    cursor: pointer;
}

.label-type-2.selected {
    background-color: rgb(222, 222, 222);
    /* border-radius: 6px; */
    cursor: pointer;
    font-weight: 700;
}

.label-icon {
    padding: 2px 8px 0px 0;
    width: 1.2em;
    height: 1.2em;
    color: rgb(66, 66, 67);
}
</style>
